<template>
  <view class="box">
    <view class="comPrice-wrap" id="comPrice-wrap">
      <!-- <view class="exportImg" @click="doPrint()">
        <text>导出图片</text>
       </view> -->
        <view class="container" id="contentToConvert">
        <view class="product-details">
          <view class="product-title">商品明细</view>
          <view class="product-img">
            <!-- <image src="../../static/images/biyan.png" class="right_arrow2"></image> -->
            <image :src="spec_image" class="right_arrow2"></image>
          </view>
          <view class="product-content">
            <view class="product-name">
             <!-- 惠普笔记本电脑640G9HPEliteBook640G9:
              I7-1270P/16G/1TSSD固态硬盘/14寸/包鼠/赠惠普笔记本电脑支架(可调节高度）
              1111111111111111111111111111111111111111111 -->
              {{ goodsInfo.goods_name }}
            </view>
			<!-- ../../static/images/biyan.pngswiperImage -->
            <view class="product-desc">
              <text class="product-huohao"
                >商家货号: {{ goodsInfo.goods_serial }}</text
              >
              <text class="product-brand"
                >品牌: {{ goodsInfo.brand_name }}</text
              >
            </view>
          </view>
        </view>
        <view class="supplier-list">
          <view class="supplier-title">供应商比价清单</view>
          <view class="supplier-table">
            <view class="supplier-tr">
              <text class="supplier-td supplier-td1">报价公司名称</text>
              <text class="supplier-td supplier-td2">报价(含税单价)</text>
              <text class="supplier-td supplier-td3">报价单位</text>
              <text class="supplier-td supplier-td4">数量单位</text>
            </view>
            <view
              class="supplier-tr"
              v-for="(item, index) in myList"
              :key="index"
            >
              <text class="supplier-td supplier-td1">{{
                item.virtual_name
              }}</text>
              <text class="supplier-td supplier-td2"
                >¥{{ item.virtual_price }}</text
              >
              <text class="supplier-td supplier-td3">元</text>
              <text class="supplier-td supplier-td4">{{
                goodsInfo.goods_unit
              }}</text>
            </view>
          </view>
        </view>
        <view class="footer">
          <view class="platform">平台:{{ store_info.store_name }}</view>
          <view class="currentDate">{{ getCurrentDate }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
// import html2canvas from "html2canvas";
export default {
  data() {
    return {
      goodsInfo: {
        name: "",
        goods_unit: "台",
      },
	  goods_id:'',
      store_info: {},
      list: [],
      spec_image: [],
	  myList:[],
    };
  },
  computed: {
    /// 获取当前日期时间并格式化为年月日
    getCurrentDate() {
      const now = new Date(); // 获取当前时间
      const year = now.getFullYear(); // 获取年份
      const month = (now.getMonth() + 1).toString().padStart(2, "0"); // 获取月份并补零
      const day = now.getDate().toString().padStart(2, "0"); // 获取日期并补零
      // 格式化并返回年月日字符串
      return `${year}年${month}月${day}日`;
    },
  },

  onLoad(options) {
    this.goods_id = options.goods_id;
	this.getGoodsInfo()
  },
  onShow() {},
  methods: {
    // doPrint() {
    //   html2canvas(document.getElementById("contentToConvert"),{useCORS: true}).then(function (
    //     canvas
    //   ) {
    //     var imgData = canvas.toDataURL("image/png");
    //     var link = document.createElement("a");
    //     link.href = imgData;
    //     link.download = "exported-image.png";
    //     link.click();
    //   });

    // },
    doPrint() {
            html2canvas(document.getElementById("contentToConvert"), {
                useCORS: true
            }).then(function (canvas) {
                var imgData = canvas.toDataURL("image/png");
                var link = document.createElement("a");
                link.href = imgData;
                link.download = "exported-image.png";
                link.click();
            });
        },
    search(res) {
      console.log(this.searchValue == "", res, 111);
      if (res != undefined) {
        this.searchValue = res.value;
      }
      this.getList();
    },
    toDetail(id) {
      uni.navigateTo({
        url: `/mall/notice/show?certify_type=${this.certify_type}&id=${id}`,
      });
    },
	//获取商品详情信息
	getGoodsInfo() {
	  let key = uni.getStorageSync("key") || "0";
	  let data = {
	    goods_id: this.goods_id,
	    key,
	    share_phyid: 41,
	  };
	
	  this.$util
	    .request({
	      url: "/mobile/index.php?act=goods&op=goods_detail",
	      data: data,
	    })
	    .then((res) => {
	      //如果账号在别地登陆
	      if (res.error_code == "1840002") {
	        uni.showToast({
	          title: "您账号已在其它地方登陆！",
	          icon: "none",
	        });
	        setTimeout(() => {
	          uni.clearStorage();
	          this.getGoodsInfo();
	        }, 1000);
	      } else if (res.error_code == 0) {
	        this.physical_info = res.datas.physical_info;
	        this.spec_image = res.datas.spec_image;
	       
	        this.goodsInfo = res.datas.goods_info;
	        this.store_info = res.datas.store_info;
	        this.myList = res.datas.virtual_list;
		 }	
	       
	    });
	},
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f5f5f5;
}

.box {
  margin: 20rpx;
  padding: 0 26rpx;
  background: #ffffff;
  //   min-height:95vh;
  .product-title,
  .supplier-title {
    color: rgba(51, 51, 51, 1);
    font-size: 28rpx;
    text-align: left;
    height: 60rpx;
    line-height: 80rpx;
    font-weight: 600;
  }
  .exportImg{
    // width:100%;
    display:flex;
    justify-content: flex-end;
    // padding:10rpx 20rpx;
    text{
    width:180rpx;
    height:60rpx;
    line-height:60rpx;
    text-align:center;
     border:1px solid #ccc;
    }
    // float:right;
  }
  .product-details {
    .product-img {
      // width: 100%;
      display: flex;
      height: 440rpx;
      justify-content: center;
      align-items: center;
      image {
        height: 360rpx;
        width: 360rpx;
      }
    }
    .product-name {
      color: #000;
      line-height: 36rpx;
      height: 110rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    .product-desc {
      color: rgba(51, 51, 51, 1);
      font-size: 24rpx;
      height: 60rpx;
      line-height: 60rpx;
      display: flex;
      justify-content: space-between;
    }
  }
  .supplier-list {
    .supplier-table {
      width: 100%;
      display: table;
      border-collapse: collapse;
    }
    .supplier-th {
      display: table-cell;
      padding: 10rpx 0;
      text-align: center;
      border: 1px solid #ccc; /* 添加边框 */
    }
    .supplier-td {
      overflow: hidden;
      white-space: no-wrap;
      text-overflow: ellipsis;
      display: table-cell;
      padding: 10rpx 0;
      text-align: center;
      border: 1px solid #ccc; /* 添加边框 */
    }

    .supplier-tr {
      color: rgba(51, 51, 51, 1);
      display: table-row;
      //   height:70rpx;
      //   line-height:50rpx;
      font-size: 20rpx;
    }
  }
  .footer {
    margin-top: 120rpx;
    text-align: right;
    color: #000;
    .platform {
      height: 60rpx;
      line-height: 60rpx;
    }
    .currentDate {
      height: 60rpx;
      line-height: 60rpx;
    }
  }
}
</style>
